<template>
	<view class="page">
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px',background: 'url('+bgimg+') no-repeat' }]">
				<view class="action" @tap="back">
					<text class="cuIcon-back text-333"></text>
				</view>
				<view class="content text-blod text-333" :style="[{ top: StatusBar + 'px' }]">
				邀请好友
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<!-- <view class="margin-right"  @click="goRoute">规则</view> -->
				<!-- #endif -->
			</view>
		</view>
		<view class="page-wrap margin-lr-64 " v-if="!isShowBind" style="margin-top: 346rpx;">
			<view class="code-bg height-760">
				<view class="flex flex-direction align-center">
					<view class="flex align-center justify-center" style="margin-top: 54rpx;">
						<image class="width-140 height-140 round" :src="userInfo.head_img" mode=""></image>
					</view>
					<view class="margin-top text-333 fu-fs28 text-bold">{{userInfo.user_nickname}}</view>
					<!-- <view class="margin-top text-333 fu-fs28 text-bold">{{i18n['邀请码']}}：{{userInfo.invite_code}}</view> -->
					<!-- <view class="margin-top text-333 fu-fs28 text-bold">剩余邀请名额：<text class="text-red">{{invite_num}}</text></view> -->
				</view>
				<view class="scancode">
					<image :src="shareCode || imgBaseUrl+'tab/logo.png'" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<!-- <view class="input-code bg-theme text-white padding-lr-sm padding-tb-xs fu-fs24" @tap="showBind"
					v-if="!userInfo.lastid">{{i18n['输入邀请码']}}</view> -->
			</view>
			<view class="margin-top-59">
				<view class=" text-white fu-fs32 text-center line-height-88 height-88 round bg-theme"  @click="openPopup">{{i18n['一键分享']}}</view>
				<!-- <button class="radius-8 text-theme bg-white fu-fs32 text-center line-height-88 height-88 margin-top-40" open-type="share">{{i18n['一键分享']}}</button> -->
				<view class="round text-theme bg-white fu-fs32 text-center line-height-88 height-88 margin-top-40"
					@click="saveImage" style="border: 1rpx solid #B82441;">{{i18n['保存图片到相册']}}</view>
			</view>
		</view>


		<view class="margin-lr-64 margin-top-100 bg-white radius-16" v-if="isShowBind">
			<view class="height-760 padding-lr-lg padding-top-56">
				<view class="flex align-center justify-center">
					<image class="fu-block-180" :src="imgBaseUrl+'/user/bind-code.png'" mode=""></image>
				</view>
				<view class="text-center text-333 text-bold margin-top-48 fu-fs32">{{i18n['您还未绑定过邀请人哦']}}</view>
				<view class="line-theme radius-8 height-96 margin-top-64 flex align-center padding-lr-sm">
					<input class="text-666" :placeholder="i18n['填写好友给你的邀请码']" placeholder-class="text-999" type="text"
						v-model="invite_code">
				</view>
				<view class="margin-top-100 bg-theme text-white text-center height-88 line-height-88 fu-fs32 radius-8"
					@tap="postSetUserLastid">{{i18n['提交']}}</view>
			</view>
		</view>
		<fu-notwork></fu-notwork>
		<fu-share-invite ref="share" :info="shareInfo"></fu-share-invite>
	</view>
</template>
<script>
	import {
		BASE_URL
	} from '@/common/config.js';
	import fuShareInvite from '../../components/fu-share-invite/fu-share-invite.vue';
	export default {
		components: {
			fuShareInvite
		},
		data() {
			return {
				userInfo: {},
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				bgimg: this.imgBaseUrl + 'user/new-bg.png', //背景图
				ctx: null,
				previewImageUrl: '',
				shareCode: '',
				invite_code: '', // 邀请码
				isShowBind: false, // 是否显示绑定弹窗
				title:global.i18n['邀请好友'],
				invite_num:0,
				shareHref:'',//分享地址
			};
		},
		computed: {
			shareInfo() {
				return {
					title: this.i18n['快来下载app,体验更多快乐'],
					summary: this.i18n['你的好友'] + this.userInfo.user_nickname + this.i18n['邀请你'],
					avatar: 'https://localelife.chunchuangkeji.cn/h5img/logo.jpg',
					bg: 'https://zhengsheng.hnshpjs.com/h5img/images/user/invite-bg.jpg',
					href: this.shareHref,
					code: this.shareCode, // 二维码
				};
			},
		},
		onShow() { 
			if (global.token) { 
				this.getInfo();
			}
		},
		onShareAppMessage() {
		  return {
		    title: '我正在使用小程序，赶紧跟我一起来体验！',
		    path: `/pages/tab/home/shopindex/index?invite_code=${global.userInfo&&global.userInfo.invite_code || ''}&page_type=share`
		  };
		},
		onShareTimeline() {
		  return {
		    title: '我正在使用小程序，赶紧跟我一起来体验！',
		    path: `/pages/tab/home/shopindex/index?invite_code=${global.userInfo&&global.userInfo.invite_code || ''}&page_type=share`
		  };
		},
		methods: {
			hadleCopy(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						this.$message.success(this.i18n['复制成功'])
					}
				});
			},
			// 打开弹窗
			openPopup() {
				this.$refs.share.open();
			},
			// 返回
			back() {
				uni.navigateBack();
			},
			// 获取二维码
			getShareCode() {
				
				// let url = BASE_URL + '/register/h5/#/pages/register/index?invite_code=' + this.userInfo.invite_code +"&phone=" + this.userInfo._mobile;
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title:'小程序码生成中'
				})
				
				let data = {
					a: global.userInfo&&global.userInfo.invite_code
				};
				let dataStr = this.$util.serialize(data);
				console.log(dataStr, data, 'dataStr')
				let page = 'pages/tab/home/shopindex/index';
				this.$api
					.post(global.apiUrls.postShareCode, {
						page: page,
						scene: dataStr,
						width: 300
					})
					.then(res => {
						if (res.data.code == 1) {
							let data = res.data.data.base64;
							this.shareCode = data;
							this.invite_num = res.data.data.surplus_invite
							uni.hideLoading()
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {});
				// #endif
				// #ifndef MP-WEIXIN
				this.$api.post(global.apiUrls.inviteFriendCode).then(res => {
					let data = res.data;
					if (data.code == 1) {
						let url = data.data.qrcode_url;
						console.log('二维码路径', url);	
						this.shareHref = data.data.url
						this.shareCode = url;
						this.invite_num = res.data.data.surplus_invite
						// this.$refs.share.init();
					} else {
						this.$message.info(this.i18n['获取分享二维码失败']);
					}
				}).catch(err => {
					console.log(err);
				})
				// #endif
			},

			// 获取用户信息
			getInfo() {
				this.$api.post(global.apiUrls.postGetUserInfo, {
					user_id: global.userInfo && global.userInfo.id || 0,
				}).then(res => {
					console.log(res);
					res = res.data;
					if (res.code == 1) {
					this.userInfo = res.data
					this.getShareCode()
						this.$store.commit('updateUserInfo', res.data);
            
						this.$forceUpdate();
					}
					uni.stopPullDownRefresh();
				})
			},
			// 保存图片
			saveImage() {
				const that = this
					uni.downloadFile({
						url:that.shareCode,//网络图片的地址
						success(res){
							console.log(res.tempFilePath)
							
							
							uni.saveImageToPhotosAlbum({
								filePath:res.tempFilePath,//临时文件地址
								success(res) {
									that.$message.info('保存成功');
								},
								fail(err){
									// that.$message.info('保存失败'+ JSON.stringify(err));
									that.$message.info('保存失败');
								}
							})
							},
							fail(res){
								console.log('保存错误',res);
							},
					})
		
				// uni.getImageInfo({
				// 	src: this.shareCode,
				// 	success: (img) => {
						
				// 		console.log(img,'图片')
						
						
				// 		uni.saveImageToPhotosAlbum({
				// 			filePath: img.path,
				// 			success: (res) => {
				// 				this.$message.info('保存成功');
				// 			},
				// 			fail: (err) => {
				// 				this.$message.info('保存失败'+ JSON.stringify(err));
				// 			}
				// 		})
				// 	}
				// })
			},
			// 显示绑定弹窗
			showBind() {
				this.isShowBind = true;
				this.title=this.i18n['输入邀请码']
			},
			// 手动绑定邀请人
			postSetUserLastid() {
				if (!this.invite_code) {
					return this.$message.info(this.i18n['请输入邀请码']);
				}
				this.$api.post(global.apiUrls.postSetUserLastid, {
					invite_code: this.invite_code
				}).then(res => {
					if (res.data.code == 1) {
						this.isShowBind = false;
						this.title=this.i18n['邀请好友']
						this.getInfo();
            this.$message.info(res.data.msg);
					} else {
						this.$message.info(res.data.msg);
					}

				})
			}

		},

	};
</script>
<style lang="scss" scoped>
	button {
	  background: #FFFFFF;
	
	  &:after {
	    border: none;
	  }
	  .margin-top-xs{
		  margin-top: 0;
		  height: 44rpx;
	  }
	}
	.page {
		width: 100%;
		// height: 100vh;
		overflow: hidden;
		background-image: url(https://localelife.chunchuangkeji.cn/h5img/tab/group_03.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 40rpx;

		.page-wrap {
			.code-bg {
				position: relative;
				background: #FFFFFF;
				border-radius: 24rpx;

				.scancode {
					position: absolute;
					bottom: 60rpx;
					left: 0;
					right: 0;
					margin: auto;
				}

				.input-code {
					position: absolute;
					right: 0;
					top: 32rpx;
					border-top-left-radius: 28rpx;
					border-bottom-left-radius: 28rpx;
				}
			}

		}

		.opacity-box {
			width: 80%;
			margin: 0 auto;
			left: 10%;
			height: 719rpx;
			background: rgba(255, 255, 255, 0.14);
			border-radius: 24rpx;
			position: fixed;
			z-index: 2;
			bottom: 300rpx;
		}

		.scancode {
			padding: 15rpx;
			width: 400rpx;
			height: 400rpx;
			border-radius: 10rpx;
			background-color: white;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bottom {
			width: 60%;
			height: 30%;

			.cu-btn {
				&:first-child {
					background: #FFFFFF;
					color: #333333;
				}

				&:last-child {
					background: $theme;
					color: #FFFFFF;
				}
			}

		}

	}
</style>
